<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="" />
    <meta name="author" content="Ckryo">
    <link rel="icon" href="/favicon.ico">
    <!-- page title -->
    <title>LY'S-BLOG</title>
    <!-- bootstrap css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <!-- css -->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/magnific-popup.css" rel="stylesheet">
    <!-- fonts -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='/fonts/FontAwesome.otf' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/linear-icons.css">
    <link rel="stylesheet" href="/css/share.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
    <!-- javascript -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.easing.min.js"></script>
</head>
<body data-spy="scroll" data-target="#post-scroll-spy">
    <!-- preloader -->
    <div id="preloader">
        <div class="spinner spinner-round"></div>
    </div>
    <!-- / preloader -->
    <!-- header -->
    <header>
        <!-- nav -->
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-logo" href="/index.html">
                        LY'S blog
                    </a>
                </div>
                <!-- / navbar-header -->
                
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                    	
                        <li>
	                        <a href="/project/index.html">
	                        	
	                        	<span>项目</span>
	                        </a>
                        </li>
                        
                        <li>
	                        <a href="/post/index.html">
	                        	
	                        	<span>文章</span>
	                        </a>
                        </li>
                        
                        <li>
	                        <a href="/about.html">
	                        	
	                        	<span>关于我</span>
	                        </a>
                        </li>
                        
                    </ul>
                </div>
                
                <!--/ nav-collapse -->
            <!-- / container -->
        </nav>
        <!-- / nav -->
        <!-- header-banner -->
        <div id="header-banner" class="demo-1"  style="background-image: url(/images/banner-bg.jpg)" >
    <div class="banner-content text-center">
        <div class="banner-info">
            <h1 id="banner-title">罗渊的博客</h1>
            <p id="banner-description" style="display: none" data-in-effect="rotateInUpRight">
                追求知识的小星星
            </p>
        </div>
        <!-- / banner-info -->
    </div>
    <!-- / banner-content -->
</div>
        <!-- / header-banner -->
    </header>
    <!-- / header -->
    <!-- / content -->
    <link rel="stylesheet" href="/css/i_slidebar.css">
<link rel="stylesheet" href="/css/i_post.css">
<div id="page-content" class="container">
    <!-- post content + sidebar -->
    <section id="blog">
        <div class="row">
            <!-- post content area -->
            <div class="col-md-9">
                <div class="blog block post-content-area">
                    <img src="/img/title/b.jpg" alt="">
                    <div class="post-info-box">
                        <h1 style="font-size: 48px;">即时通讯软件设计简要分析</h1>
                        <p class="post-info" style="margin-bottom: 15px;">
                            发表于:
                            <span style="color: #aaa; margin: 0 15px">
                                2018.02.03
                            </span>
                             | 分类：
                             <a href="#" style="margin: 0 5px">
                                
                                    -
                                
                             </a>

                             <!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->
                                

                             
                        </p>
                        <blockquote>
<p>本文主要简单分析一下使用Java设计一个简单的即时通讯软件的思路。</p>
</blockquote>
<h4 id="必备知识"><a href="#必备知识" class="headerlink" title="必备知识"></a>必备知识</h4><a id="more"></a>
<hr>
<blockquote>
<p>即时通讯概述</p>
</blockquote>
<p>   <strong>即时通讯</strong>(Instant messaging，简称IM)，是以万维网为基础，实现通信双方语言、文件、语音等实时信息传送的通信过程。与Email等传统的通信方式相比，即时通信具有实时、方便、快捷、廉价、交互性好等优点。</p>
<blockquote>
<p>网络术语基本概念</p>
</blockquote>
<ol>
<li><strong>Socket(套接字)</strong>: 套接字是通过操作系统(OS)完成网络通信的一种标准方法。可以将套接字看作是与连接相连的一个终端，就像是操作员配电盘上的一个插座一样。但是这些套接字只是程序员的抽象称呼，它们负责有文描述的OSI模型的所有基本细节。对程序员来说，可以使用一个套接字通过网络发送或接收数据。这些数据在较低的层（由操作系统处理）之上的会话层传输，该层负责路由。有几种不同的套接字，它们决定了传输层的结构。最常见的类型是流套接字和数据报套接字。Java支持刘套接字和数据报套接字。流套接字(stream socket)使用传输控制协议(TCP)进行数据传输，而数据报套接字使用用户数据报协议(UDP)。</li>
<li><strong>TCP协议(传输控制协议)</strong>:提供的是面向连接、可靠的字节流服务。当客户和服务器彼此交换数据前，必须先在双方之间建立一个TCP连接，之后才能传输数据。TCP提供超时重发，丢弃重复数据，检验数据，流量控制等功能，保证数据能从一端传到另一端。  <img src="/img/title/b.jpg" alt="tcp"></li>
<li><strong>UDP协议(用户数据报协议)</strong>:是一个简单的面向数据报的运输层协议。UDP不提供可靠性，它只是把应用程序传给IP层的数据报发送出去，但是并不能保证它们能到达目的地。由于UDP在传输数据报前不用在客户和服务器之间建立一个连接，且没有超时重发等机制，故而传输速度很快。</li>
<li><strong>IP地址</strong>:即依照TCP/IP协议分配给本地主机的网络地址，两个进程要通讯，任一进程首先要知道通讯对方的位置，即对方的IP。</li>
<li><strong>端口</strong>: 用来辨别本地通讯进程，一个本地的进程在通讯时均会占用一个端口号，不同的进程端口号不同，因此在通讯前必须要分配一个没有被访问的端口号。在本地可以通过进程PID来唯一标识一个进程，但是在网络中这是行不通的。网络层的“IP地址”可以唯一标识网络中的主机，而传输层的“协议+端口”可以唯一标识主机中的应用程序（进程）。这样利用三元组（IP地址，协议，端口）构成套接字，就可以标识网络的进程了，网络中的进程通信就可以利用这个标志与其它进程进行交互。</li>
</ol>
<h4 id="系统架构"><a href="#系统架构" class="headerlink" title="系统架构"></a>系统架构</h4><blockquote>
<p>C/S架构</p>
</blockquote>
<p>C/S架构，即Client/Server(客户机/服务器)结构，是传统的软件系统体系结构，通过将任务合理的分配到Client端和Server端，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。客户端用于用户的注册、登录、通讯，而服务器端用于接收用户注册信息、验证登录信息以及转发用户之间相互通讯的信息。</p>
<blockquote>
<p>MVC模式</p>
</blockquote>
<p>MVC是软件工程的一种软件架构模式，把软件系统分为三个基本部分：<code>模型(Model)</code>、<code>视图(View)</code>和<code>控制器(Controller)</code>。根据界面设计可变性需求，MVC思想通常把应用分解成模型、视图、控制器三个基本组成部分。M是模型，表示业务逻辑的处理，用于存储和处理数据；V是视图，表示数据的显示和用户输入的获取，它完成组件的所有显示；C表示控制器，通常用来获取数据。</p>
<h4 id="需求分析"><a href="#需求分析" class="headerlink" title="需求分析"></a>需求分析</h4><hr>
<blockquote>
<p>需求概述</p>
</blockquote>
<p>本系统的主要功能有:用户可以进行账号注册、登录、显示好友、添加好友、在线聊天等操作。</p>
<p><strong>服务器端主要功能</strong></p>
<ul>
<li>验证用户的登录信息</li>
<li>保存用户的注册信息</li>
<li>进行消息的转发</li>
<li>返回用户的好友信息</li>
<li>在线用户的管理</li>
</ul>
<p><strong>客户端的主要功能</strong></p>
<ul>
<li>用户登录</li>
<li>用户注册</li>
<li>添加好友</li>
<li>显示好友</li>
<li>发送消息</li>
</ul>
<h4 id="总体设计"><a href="#总体设计" class="headerlink" title="总体设计"></a>总体设计</h4><hr>
<blockquote>
<p>系统总体框架</p>
</blockquote>
<p><img src="/css/images/title/a.jpg" alt="a"></p>
<p>本系统由服务器端和客户端两个子系统组成，服务器端进行端口的监听，对客户端的请求做出处理，对临时数据进行持久化处理。持久化处理时，可使用数据库或文件存储。具体需要对用户的登录信息、好友等数据进行存储。由于我们的设计比较简单，业务并不复杂，也可以使用文件进行存储。客户端需要提供用户界面，方便用户的操作，获取用户的操作信息，并将其发送给服务器，获得服务器的反馈并处理。</p>
<h4 id="概要设计"><a href="#概要设计" class="headerlink" title="概要设计"></a>概要设计</h4><blockquote>
<p>服务器端</p>
</blockquote>
<p>服务器端主要功能是负责监听来自客户端的请求，建立与客户端的连接，并且对其进行维护，建立连接之后对客户端发来的请求予以响应，并对其进行相应的处理。服务器端的主要功能有：验证客户端发送的登录信息，如果正确则进行更新在线用户信息，否则返回登录界面；对客户端发送的注册信息进行处理，结束后返回注册界面；反馈查询信息和添加好友的处理信息；将信息转发到目标客户端的通信界面。</p>
<p><img src="/css/images/title/d.jpg" alt="d"></p>
<p>服务器端和客户端通信的过程为：首先用户从客户端登录，将用户账号和密码发送到服务器端验证，如果验证通过，则服务器建立一个线程保持与客户端通信，并把验证成功的消息传回到客户端；如果验证失败，则仅返回登陆失败的消息。然后客户端收到服务器端返回的验证消息，若登录成功，则客户端界面由登录界面转到好友列表界面，并显示在线好友的情况，同时客户端也新开一个线程保持与服务器端的通信，然后就可以开始与在线好友的聊天了；若登录失败，则显示一个消息框，提示用户登录出错，用户可以进行申请号码等操作。</p>
<blockquote>
<p>客户端</p>
</blockquote>
<p>客户端为用户提供图形界面，负责向服务器端发送请求，并且接收服务器端反馈的处理结果。客户端的功能有：允许新用户注册；允许已经注册的用户登录系统；登录成功则在通信界面显示好友的列表信息，并且允许查询并添加好友，在通信界面，向服务器发送信息，并接收服务器端转发的信息。</p>
<p><img src="/css/images/title/eee.jpg" alt="d"></p>
<h4 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h4><ol>
<li>《基于Java的即时通讯系统的设计与实现》</li>
</ol>

                    </div>
                    <!-- / post-info-box -->
                </div>
                <!-- / blog-block -->
            </div>
            <!-- / col-md-9 -->
            <!-- / post content area -->
            <style type="text/css">
.post-tab-header {
    width: 100%;
    padding: 5px 50px;
    height: 40px;
    margin-bottom: 10px;
}

.post-tab-header li {
    width: 50%;
    float: left;
    text-align: center;
    cursor: pointer;
    padding-bottom: 10px;
}

.post-tab-header li.active {
    color: #c39d6d;
    border-bottom: 1px solid #c39d6d;
}

.post-tab-content .post-tab-item {
    display: none;
}

.post-tab-content .post-tab-item.active {
    display: block;
}

@keyframes MinefadeInUp {
    from {
        opacity: 0;
        transform: translateY(45px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.MinefadeInUp {
    animation-name: MinefadeInUp;
}

ol,
ul,
li {
    list-style: none;
}

.post-toc {
    font-size: 14px;
    color: #666;
    overflow: auto;
}

.post-toc .nav-link {
    padding: 0px;
}

.post-toc ol {
    margin: 0;
    padding: 5px 0 5px 20px;
    text-align: left;
    list-style: none;
    font-size: 14px;
}

.post-toc ol>ol {
    padding-left: 0;
}

.post-toc ol a {
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: all;
    color: #666;
    border-bottom-color: #ccc;
}

.post-toc ol a:hover {
    color: #000;
    border-bottom-color: #000;
}

.post-toc .nav-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.8;
}

.post-toc .nav .nav-child {
    display: none;
}

.post-toc .nav .active>.nav-child {
    display: block;
}

.post-toc .nav .active-current>.nav-child {
    display: block;
}

.post-toc .nav .active-current>.nav-child>.nav-item {
    display: block;
}

.post-toc .nav .active>a {
    color: #c39d6d;
    border-bottom-color: #c39d6d;
}

.post-toc .nav .active-current>a {
    color: #c39d6d;
}

.post-toc .nav .active-current>a:hover {
    color: #c39d6d;
}
</style>
<!-- post sidebar area -->
<div class="col-md-3">
    <div class="blog-sidebar" data-spy="affix" data-offset-top="627">
        <ul class="post-tab-header">
            <li class="active" data-index="0">文章目录</li>
            <li data-index="1">站点概览</li>
        </ul>
        <div style="clear: both"></div>
        <div class="post-tab-content">
            <div id="post-scroll-spy" data-index="0" class="active post-tab-item animated MinefadeInUp">
                <div class="post-toc">
                    <ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#必备知识"><span class="nav-number">1.</span> <span class="nav-text">必备知识</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#系统架构"><span class="nav-number">2.</span> <span class="nav-text">系统架构</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#需求分析"><span class="nav-number">3.</span> <span class="nav-text">需求分析</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#总体设计"><span class="nav-number">4.</span> <span class="nav-text">总体设计</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#概要设计"><span class="nav-number">5.</span> <span class="nav-text">概要设计</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#参考文献"><span class="nav-number">6.</span> <span class="nav-text">参考文献</span></a></li></ol>
                </div>
            </div>
            <div data-index="1" class="post-tab-item animated MinefadeInUp">
                <div class="blog block post-sidebar-widget">
    <img class="site-author-image" src="/images/my.jpg">
    <p class="site-author-name">阿文</p>
    <p class="site-author-description">Vimer</p>
    <!-- <div class="feed-link motion-element">
                        <a href="/atom.xml" rel="alternate">
                            <i class="fa fa-rss"></i> RSS
                        </a>
                    </div> -->
    <nav class="site-state motion-element">
        <div class="site-state-item site-state-posts">
            <a href="/archives">
                <!-- 计算文章 和 项目总数量 -->
                
                <span class="site-state-item-count">26</span>
                <span class="site-state-item-name">文章</span>
            </a>
        </div>
        <div class="site-state-item site-state-categories">
            <a href="/categories">
	            <span class="site-state-item-count">0</span>
	            <span class="site-state-item-name">项目</span>
            </a>
        </div>
    </nav>
</div>
            </div>
        </div>
    </div>
</div>
<!-- / col-sm-4 col-md-3 -->
<!-- / post sidebar area -->
<script type="text/javascript">
$(function() {
    $('.post-tab-header').on('click', 'li', function() {
        if ($(this).hasClass('active')) return;
        $('.post-tab-header li').removeClass('active');
        $('.post-tab-content .post-tab-item').removeClass('active');
        $(this).addClass('active');
        var index = $(this).data('index');
        $('.post-tab-content').find('.post-tab-item[data-index=' + index + ']').addClass('active');
    });
});
</script>
        </div>
        <!-- / row -->
    </section>
    <!-- / post content + sidebar -->
</div>

        <!-- / content -->
</body>
<!-- footer -->
<footer>
    <div class="container">
        <p class="footer-info">© Made by gitlily</p>
    </div>
    <!-- / container -->
</footer>
<!-- / footer -->
<!-- portfolio -->
<script src="/js/custom.js"></script>
<script src="/js/jquery.shuffle.min.js"></script>
<!-- lightbox -->
<script src="/js/jquery.magnific-popup.min.js"></script>
<!-- / lightbox -->
<!-- / portfolio -->
<!-- preloader -->
<script src="/js/preloader.js"></script>
<!-- / preloader -->
<!-- / javascript -->
<script src="/js/jquery.lettering.js"></script>
<script src="/js/jquery.textillate.js"></script>
<script>
$(function() {
    $('#banner-title').textillate({
        in: {
            // set the effect name
            effect: 'fadeInDown',
            callback: function() {
                $('#banner-description').css('display', 'block');
                $('#banner-description').textillate();
            }
        },
        // set the type of token to animate (available types: 'char' and 'word')
        type: 'char'
    });
});
</script>

</html>